1 files changed, 51 insertions, 0 deletions
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/breakdown/BreakdownPage.tsx b/src/app/(main)/websites/[websiteId]/(reports)/breakdown/BreakdownPage.tsx
new file mode 100644
index 0000000..fdead9f
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/(reports)/breakdown/BreakdownPage.tsx
@@ -0,0 +1,51 @@
+'use client';
+import { Column, Row } from '@umami/react-zen';
+import { useState } from 'react';
+import { FieldSelectForm } from '@/app/(main)/websites/[websiteId]/(reports)/breakdown/FieldSelectForm';
+import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
+import { Panel } from '@/components/common/Panel';
+import { useDateRange, useMessages } from '@/components/hooks';
+import { ListCheck } from '@/components/icons';
+import { DialogButton } from '@/components/input/DialogButton';
+import { Breakdown } from './Breakdown';
+
+export function BreakdownPage({ websiteId }: { websiteId: string }) {
+  const {
+    dateRange: { startDate, endDate },
+  } = useDateRange();
+  const [fields, setFields] = useState(['path']);
+  return (
+    <Column gap>
+      <WebsiteControls websiteId={websiteId} />
+      <Row alignItems="center" justifyContent="flex-start">
+        <FieldsButton value={fields} onChange={setFields} />
+      </Row>
+      <Panel height="900px" overflow="auto" allowFullscreen>
+        <Breakdown
+          websiteId={websiteId}
+          startDate={startDate}
+          endDate={endDate}
+          selectedFields={fields}
+        />
+      </Panel>
+    </Column>
+  );
+}
+
+const FieldsButton = ({ value, onChange }) => {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <DialogButton
+      icon={<ListCheck />}
+      label={formatMessage(labels.fields)}
+      width="400px"
+      minHeight="300px"
+      variant="outline"
+    >
+      {({ close }) => {
+        return <FieldSelectForm selectedFields={value} onChange={onChange} onClose={close} />;
+      }}
+    </DialogButton>
+  );
+};